<template>
  <!--角色权限管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="show1">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page" style="padding-top: 40px">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="show">
      <div class="add_style">
        <span>角色名:</span>
        <Input v-model="formItem.name" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>权限:</span>
        <Select v-model="formItem.jurisdiction" multiple style="width:620px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="save()">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="save1()">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import paging from '../module/paging.vue';

  export default {
    components: {
      paging
    },
    data() {
      return {
        /*分页*/
        all: 1,
        cur: 1,
        /*查询url*/
        inquireurl: this.$api.url + '/role/allRole/',
        /*公用*/
        show: false,
        /*添加按钮*/
        table: true,
        addBtn: false,
        /*返回按钮*/
        table2: false,
        /*编辑按钮*/
        compileBtn: false,
        /*表单*/
        formItem: {
          createUser: 1,
          name: '',
          jurisdiction:[],
        },
        cityList: [],
        /*表格*/
        columns: [
          {
            title: '角色',
            key: 'name',
            align: 'center',
          },
          {
            title: '操作',
            key: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show2(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data: [],
        roleAuthorities:[],
        modal2: false,
        index:'',
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.get(this.inquireurl, this.cur);
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*添加*/
      show1() {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.addBtn = true;
        this.$axios.get(this.$api.url + '/authority/selectAuthorityAll').then((res) => {
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].title,
            };
            this.cityList.push(data)
          }
        });

      },
      /*编辑*/
      show2(index) {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.compileBtn = true;
        this.formItem.name = this.data[index].name;
        this.formItem.rid = this.data[index].id;
        this.$axios.get(this.$api.url + "/authority/AllFunction").then((res) => {
          for (let i in res.data.data) {
            let data = {
              value: res.data.data[i].id,
              label: res.data.data[i].title,
            };
            this.cityList.push(data)
          }
        });
      },
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index]
      },
      notarizeRemove(){
        this.$axios.get(this.$api.url + "/role/authority/delete/role/" + this.index.id).then((res) => {
          if(res.data.data == true){
            this.$Message.success(`删除成功!`);
            this.modal2 = false;
            this.get(this.inquireurl, this.cur)
          }else{
            this.$Message.success(`该角色无法删除！`);
          }
        });
      },
      /*返回*/
      back() {
        this.table = true;
        this.table2 = false;
        this.addBtn = false;
        this.show = false;
        this.compileBtn = false;
        this.formItem = {
          createUser: 1,
          name: '',
          jurisdiction:[],
        };
        this.get(this.inquireurl, this.cur)
      },
      /*保存*/
      save() {
        this.post(this.$api.url + '/role/authority/add');
      },
      save1(){
        this.post(this.$api.url + '/role/authority/updateRole')
      },
      /*post请求*/
      post(url) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(this.formItem),
          url: url,
        }).then((res) => {
          this.$router.go(0)
        })
      },
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url + cur).then((res) => {
          this.all = res.data.totalPage;
          let _this = this;
          _this.data = [];
          for (let i in res.data.lists) {
            let data = {
              id: res.data.lists[i].id,
              name: res.data.lists[i].name,
            };
            _this.data.push(data);
          }
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 70px;
  }
</style>
